<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bookstrap排版样式</title>
    <link rel="stylesheet" href="..\bootstrap-3.3.7-dist\css\bootstrap.min.css">
</head>
<body style="margin:50px">

    <!-- 突出样式 -->
    <p class="lead">Bootstrap</p>         
    <p>Bootstrap</p>
    <p>Bootstrap</p>
    <p>Bootstrap</p>

    <h1>Bootstrap<small>框架</small></h1>
    <h2>Bootstrap<small>框架</small></h2>
    <h3>Bootstrap<small>框架</small></h3>
    <h4>Bootstrap<small>框架</small></h4>
    <h5>Bootstrap<small>框架</small></h5>
    <h6>Bootstrap<small>框架</small></h6>

    <span class="h1"><mark>Bootstrap框架</mark></span>

    <!-- 英文字母全部变成大写 -->
    <h1 class="h1"><abbr class="initialism">Bootstrap框架</abbr></h1>

    <!-- 全部大写 -->
    <p class="text-uppercase">Bootstrap框架</p>

    <!-- 地址格式 取消了倾斜 设置了行高 -->
    <address>地址</address>

    <!-- 引用文本样式 -->
    <blockquote>引用文本</blockquote>

    <!-- 引用文本反向样式 -->
    <blockquote class="pull-right">引用文本</blockquote>
    

    <!-- 左对齐 居中对齐  右对齐 -->
    <p class="text-left">Bootstrap框架</p>    
    <p class="text-center">Bootstrap框架</p>
    <p class="text-right">Bootstrap框架</p>
    <!-- 文本不换行 -->
    <p class="text-nowrap" style="border:1px solid red;width:50px;">Bootstrap框架</p>
    
    <!-- 清除默认的列表样式 设置内联 -->
    <ul class="list-unstyled list-inline">
        <li>li标签</li>
        <li>li标签</li>
        <li>li标签</li>
        <li>li标签</li>
        <li>li标签</li>  
    </ul>

    <!-- 水平列表描述列表 -->
    <dl class="dl-horizontal">
        <dt>Bootstrap</dt>
        <dd>设计好的页面排版的样式供开发者使用</dd>
    </dl>

    <!-- 内联代码 -->
    <code>&lt;section&gt;</code>
    <!-- 代码块 -->
    press <kbd>ctrl + ,</kbd>
    <!-- 用户输入 -->
    <pre>&lt;p&gt;Please input...&lt;/p&gt;</pre>

    <script src="..\bootstrap-3.3.7-dist\js\jquery-3.2.1.min.js"></script>
    <script src="..\bootstrap-3.3.7-dist\js\bootstrap.min.js"></script>
</body>
</html>